import React from 'vue';

export default ({
  onSelectColor
}:any) => {
  
  //标签颜色
  const ColorList = [
    ['#F76701', '#FF9402', '#20C342', '#4724FD', '#0253FF'],
    ['#FF0032', '#324CFF', '#7B22FF', '#FF0089', '#F1B308'],
    ['#0090FF', '#00B677', '#C700FF', '#FF00EF', '#00AFFF'],
  ];

  return (
    <div>
      {
        ColorList.map((item, index) => {
          return (
            <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: '10px', }}>
              {
                 item.map((cItem: any, cIndex) => {
                  return (
                    <div 
                      key={cIndex}
                      onClick={() => onSelectColor(cItem)}
                      style={{
                        marginLeft: cIndex % 5 === 0 ? '0' : '15px',
                        width: '24px',
                        height: '24px',
                        borderRadius: '4px',
                        background: cItem,
                      }}
                    />
                  )
                })
              }
            </div>
          )
        })
      }
    </div>
  );
}